<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="sj" uri="/struts-jquery-tags"%>
<%@ taglib prefix="sb" uri="/struts-bootstrap-tags"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<s:include value="/WEB-INF/content/common/header.jsp"></s:include>
<link rel="stylesheet" href="<s:url value='/css/toggle-switch.css' />" />

<script>
	var panelId = "<s:property value='%{panelId}'/>";
	function changeOperation(chk) {
		$.ajax({
			url : "../switches/changeOperation.html?id=" + chk.id + "&panelId=" + panelId,
			success : function(result) {
				//no need response
			}
		});
	}
	/* function cameraRotate(chk,id) {
		alert(chk.id+", "+id+",<s:property value='%{controller.id}'/>");
		
		$.ajax({
			url : "../switches/changeOperation.html?id=" + chk.id + "&panelId="
					+ panelId,
			success : function(result) {
				//no need response
			}
		});
	} */
</script>
</head>

<body class="bg">
	<s:include value="/WEB-INF/content/common/title-head.jsp"></s:include>

	<div class="content">
		<s:include value="/WEB-INF/content/common/tab.jsp"></s:include>
		<script>
			$("#homeTab").addClass("active");
		</script>
		<div class="body">
			<div class="row">
				<div class="span7">
					<h3>
						スイッチパネル <img id="switchIndicator"
							src="<s:url value='/img/progress_bar.gif' />" alt="Loading..."
							style="display: none" />
					</h3>

					<div class="row-fluid">

						<s:url var="switchStatusUrl" action="view-switch-status.html"
							namespace="/switches" includeParams="none">
							<s:param name="panelId" value="%{panelId}"></s:param>
						</s:url>

						<sj:div id="switchStatusDiv" href="%{#switchStatusUrl}"
							indicator="switchIndicator" updateFreq="60000">

						</sj:div>

					</div>
				</div>
				<div class="span5">
				
					<h3>
						<s:text name="camera.display" />
					</h3>

					<div id="streamDiv" class="thumbnail">
						<s:property value="id" />
						<img id="videoIndicator"
							src="<s:url value='/img/progress_bar.gif' />" alt="Loading..."
							style="display: none" />

						<s:url var="videoStreamUrl" action="view-video-stream.html"
							namespace="/controller" includeParams="none">
							<s:param name="id" value="controllerList[0].id"></s:param>
						</s:url>
						
						<s:url var="imageStreamUrl" action="view-image-stream.html"  
							namespace="/controller" includeParams="none">
							<s:param name="id" value="controllerList[0].id"></s:param>
						</s:url>

						<sj:div href="%{#videoStreamUrl}" indicator="switchIndicator">

							<img id="videoIndicator"
								src="<s:url value='/img/progress_bar.gif' />" alt="Loading..."
								style="display: none" />

						</sj:div>


						<!-- <img style="width:320px; height:240px" src=""> -->
						<%-- <div class="caption">
							<h3>
								<s:property value="controllerList[0].name" />
							</h3>
							<p>
								<s:property value="controllerList[0].url" />
							</p>
						</div> --%>
					</div>
					<ul class="nav nav-list">
						<s:iterator value="controllerList" status="rowNumber">
							<s:if test="rowNumber.index == 0">
								<li class="active">
							</s:if>
							<s:else>
								<li>
									<s:if test="mobileAccess" >
										<s:url var="cameraSelectUrl"
												action="view-video-stream.html" namespace="/controller"
												includeParams="none"><s:param name="id" value="id" />
											</s:url>
									</s:if>		
								   <s:else>
								   		<s:url var="cameraSelectUrl"
											action="view-image-stream.html" namespace="/controller"
											includeParams="none"><s:param name="id" value="id" />
										</s:url>
									</s:else>
											 <sj:a href="%{#cameraSelectUrl}" targets="streamDiv">
											<s:property value="name" />
										</sj:a>
								</li>
							</s:else>
						</s:iterator>
					</ul>
				</div>
			</div>
		</div>
	</div>
	<div id="footer">
		<s:include value="/WEB-INF/content/common/footer.jsp"></s:include>
	</div>
</body>
</html>